<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="/js/jquery-2.1.0.js"></script>
		<title></title>
		<style>
			img {
				width: 200px;
				height: 241px;
			}
		</style>
	</head>

	<body>
		<form id="uface">
			<input type="file" name="files" id="upload" value="">
			<button type="button" onClick="uploadImg()">submit</button>
		</form>

		<div>
			<p>Console</p>
			<div>
				<label>Width</label> <input name="width" value="80" />
			</div>
			<div>
				<label>Height</label> <input name="height" value="80" />
			</div>
			<div>
				<label>X</label> <input name="x" value="105" />
			</div>
			<div>
				<label>Y</label> <input name="y" value="148" />
			</div>
			<div>
				<button onclick="_switch()">Switch</button>
			</div>
		</div>
		<canvas id="canvas" width="395" height="476"></canvas>
		<canvas id="canvas1" width="395" height="476"></canvas>
		<img style="display: none;" id="target" src="/files/7clpbEyB7le3lQa1KCW7Ey4j.jpg" />
		<img style="display: none;" id="jz" src="/images/<%=locals.face.img%>" onerror="this.src=''" />
		<!--<img style="display: none;" id="jz" src="/images/_timg.png" />-->
		<script type="text/javascript">
			function _switch() {
				var width = $("[name=width]").val();
				var height = $("[name=height]").val();
				var x = $("[name=x]").val();
				var y = $("[name=y]").val();
				createFace({
					width: width,
					height: height,
					x: x,
					y: y
				})
			}

			function uploadImg() {
				var formData = new FormData();
				formData.append("file", $("#upload")[0].files[0]);
				var reader = new FileReader();
				reader.onload = function(e) {
					$('#target')[0].src = e.target.result;
				};
				reader.readAsDataURL($("#upload")[0].files[0]);
				$.ajax({
					type: 'POST',
					url: '/face/upload',
					data: formData,
					processData: false,
					contentType: false,
					success: function(res) {
						console.log(res);
						var json = JSON.parse(res);
						createFace({
							json: json
						});
						//从后端获取到人脸检测到结果后，调用createFace函数，进行图片合成  
					}
				});
			};

			function createFace(opts) {
				opts = opts || {};
				var jzimg = $('#jz')[0];
				var img = $('#target')[0];
				var canvas = $('#canvas')[0];
				var ctx = canvas.getContext('2d');
				ctx.clearRect(0, 0, 1000, 1000);
				var json = opts.json || {}
				
				var sx = 272,
					sy = 129,
					swidth = 116,
					sheight = 113;
				if(opts.json){
					sx = json.result[0].location.left || 272;
					sy = json.result[0].location.top || 129;
					swidth = json.result[0].location.width || 116;
					sheight = json.result[0].location.height || 113;
				}
				/*var sx = 272,
					sy = 129,
					swidth = 116,
					sheight = 113;*/

				/*var width = <%=locals.face.width%>,
					height = <%=locals.face.height%>,
					x = <%=locals.face.x%>,
					y = <%=locals.face.y%>;*/
				var width = opts.width || <%=locals.face.width%>,
					height = opts.height || <%=locals.face.height%>,
					x = opts.x || <%=locals.face.x%>,
					y = opts.y || <%=locals.face.y%>; {
					var ctx1 = $('#canvas1')[0].getContext('2d');
					ctx1.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
				}
				ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
				ctx.globalCompositeOperation = 'source-over';
				ctx.drawImage(jzimg, 0, 0);

				//globalCompositeOperation = 'source-over';  这个是用来把抠出来到人脸，合成到军装里到关键设置，可以合成任意到图片，并保留图片到透明信息哦。 相当于ps里的图层叠加概念
			};

			$(function() {
				createFace({});
			})
		</script>
	</body>

</html>